<template>
  <div class="container">
    <!-- 轮播图部分 -->
    <div class="carousel-container">
      <div class="carousel">
        <transition-group name="fade">
          <div v-for="(image, index) in carouselImages" :key="index" v-show="currentIndex === index"
            class="carousel-item">
            <img :src="image" :alt="`轮播图 ${index + 1}`" class="carousel-image" />
          </div>
        </transition-group>

        <!-- 轮播图控制按钮 -->
        <div class="carousel-controls">
          <button @click="prevSlide" class="carousel-control prev">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="lucide lucide-chevron-left">
              <path d="m15 18-6-6 6-6" />
            </svg>
          </button>
          <button @click="nextSlide" class="carousel-control next">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="lucide lucide-chevron-right">
              <path d="m9 18 6-6-6-6" />
            </svg>
          </button>
        </div>

        <!-- 轮播图指示器 -->
        <div class="carousel-indicators">
          <button v-for="(_, index) in carouselImages" :key="index" @click="goToSlide(index)"
            :class="['carousel-indicator', { active: currentIndex === index }]"></button>
        </div>
      </div>
    </div>

    <!-- 功能卡片部分 -->
    <div class="feature-cards">
      <div v-for="(feature, index) in features" :key="index" class="feature-card" @click="navigateTo(feature.href)">
        <div class="feature-card-top" :style="{ backgroundColor: feature.color }">
          <div class="feature-card-content">
            <h3 class="feature-card-title">{{ feature.title }}</h3>
            <p class="feature-card-subtitle">{{ feature.subtitle }}</p>
          </div>
          <div class="feature-card-image">
            <img :src="feature.image" :alt="feature.title" />
          </div>
        </div>
        <div class="feature-card-bottom">
          <p class="feature-card-description">{{ feature.description }}</p>
          <div class="feature-card-action">
            <span class="feature-card-link">点击进入 &raquo;</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="Index">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import useUserStore from '@/store/modules/user'

const userStore = useUserStore();

const isStudent = userStore.roles[0] === 'student' ? true : false; // 判断是否是学生角色

const router = useRouter();
// 轮播图数据
const carouselImages = [
  'src/assets/images/carousel/01.png',
  'src/assets/images/carousel/02.png',
  'src/assets/images/carousel/03.png',
  'src/assets/images/carousel/04.png',
  'src/assets/images/carousel/05.png',
]

// 功能卡片数据
const features = ref([
  {
    title: '智能学生管理',
    subtitle: 'Intelligent student management',
    description: '通过目标检测、人脸识别等技术实现学生基本信息及考勤、作业等学习数据的管理与分析。',
    color: '#8e44ad', // 紫色
    href: '/student_manage/student_manage_overview',
    image: 'src/assets/images/index/students.png'
  },
  {
    title: '课堂行为分析',
    subtitle: 'Classroom behavior analysis',
    description: '通过姿态识别、微表情识别等技术实现学生读书、举手、讨论等课堂行为的分析。',
    color: '#2980b9', // 蓝色
    href: '',
    image: 'src/assets/images/index/students.png'
  },
  {
    title: '智能教学评价',
    subtitle: 'Intelligent teaching evaluation',
    description: '通过集成学习、深度学习等技术实现教师教学效果与学生学习效果的自动评价。',
    color: '#d35400', // 橙色
    href: '',
    image: 'src/assets/images/index/students.png'
  },
  {
    title: '智能学情分析',
    subtitle: 'Intelligent learning situation analysis',
    description: '融合家长、教师、学生等角色的信息共享平台，实现学情分析、学情问题反馈等功能。',
    color: '#3498db', // 浅蓝色
    href: '',
    image: 'src/assets/images/index/students.png'
  },
  {
    title: '教学资源管理',
    subtitle: 'Teaching resource management',
    description: '针对课件、视频、教案、讲义等教学资源的智能化管理及相关数据的分析。',
    color: '#16a085', // 青色
    href: '',
    image: 'src/assets/images/index/students.png'
  },
  {
    title: '评价体系构建',
    subtitle: 'Evaluation system construction',
    description: '利用多模态数据实现可体现德、智、体、美、劳"五育并举"评价体系的自动构建与优化。',
    color: '#27ae60', // 绿色
    href: '',
    image: 'src/assets/images/index/students.png'
  }
])

// 轮播图逻辑
const currentIndex = ref(0)
let autoplayInterval = null

const nextSlide = () => {
  currentIndex.value = (currentIndex.value + 1) % carouselImages.length
}

const prevSlide = () => {
  currentIndex.value = (currentIndex.value - 1 + carouselImages.length) % carouselImages.length
}

const goToSlide = (index) => {
  currentIndex.value = index
}

const startAutoplay = () => {
  autoplayInterval = setInterval(() => {
    nextSlide()
  }, 5000) // 5秒切换一次
}

const stopAutoplay = () => {
  if (autoplayInterval) {
    clearInterval(autoplayInterval)
  }
}

// 路由导航
const navigateTo = (href) => {
  console.log('导航到:', href)
  router.push(href)
}

onMounted(() => {
  if (isStudent) {
    features.value[0].href = '/student_manage/student_manage_class_overview';
  }
  startAutoplay()
})

onBeforeUnmount(() => {
  stopAutoplay()
})
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  margin: 0 auto;
  padding: 10px;
}

/* 轮播图样式 */
.carousel-container {
  margin-bottom: 50px;
  // 占满页面宽度
  width: 100%;
}

.carousel {
  position: relative;
  width: 100%;
  height: 460px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); // 增强阴影效果
}

.carousel-item {
  position: absolute;
  width: 100%;
  height: 100%;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-controls {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  pointer-events: none;
}

.carousel-control {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  pointer-events: auto;
  transition: background-color 0.3s;

  &:hover {
    background-color: rgba(0, 0, 0, 0.5);
  }
}

.carousel-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.carousel-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;

  &.active {
    background-color: white;
  }
}

/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 功能卡片样式 */
.feature-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.feature-card {
  max-width: 420px;
  max-height: 260px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  background-color: white;
  // 添加默认周围阴影
  box-shadow: 0 0 24px 8px rgba(0, 0, 0, 0.15);

  &:hover {
    box-shadow: 0 0 24px 8px rgba(0, 0, 0, 0.30);
  }
}

.feature-card-top {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  color: white;
  height: 120px;
}

.feature-card-content {
  flex: 1;
}

.feature-card-title {
  font-size: 24px;
  font-weight: bold;
  margin: 0 0 5px 0;
}

.feature-card-subtitle {
  font-size: 14px;
  opacity: 0.8;
  margin: 0;
}

.feature-card-image {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
}

.feature-card-bottom {
  padding: 16px;
  max-height: 120px;
}

.feature-card-description {
  font-size: 14px;
  color: #333;
  margin-bottom: 16px;
  line-height: 1.5;
}

.feature-card-action {
  display: flex;
  justify-content: flex-end;
}

.feature-card-link {
  color: #2980b9;
  font-size: 14px;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .feature-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .carousel {
    height: 300px;
  }

  .feature-cards {
    grid-template-columns: 1fr;
  }
}
</style>